<template>
  <view class="stars">
    <text class="cuIcon-favorfill icon" v-if="readOnly && stars === 0"/>
	
    <text class="cuIcon-favorfill icon" v-for="star in num" :key="star"
          :class="{active:star < stars, [size]:true }" @click="handleStarClick(star)"
    ></text>
  </view>
</template>

<script>
export default {
  name: "starts",
  data() {
    return {
      max: 5,
      stars: Math.round(Number(this.value)),
    }
  },
  props: {
    value: Number | String,
    readOnly: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "small",
    },
  },
  computed: {
    num() {
      return this.readOnly ? this.stars : this.max;
    }
  },
  methods: {
    handleStarClick(star) {
		
      if (!this.readOnly)
        this.stars = star+1;
		
    }
  },
  watch: {
    num(val) {
		console.log(this.val,"val")
      this.stars = Math.round(Number(val))
    },
    stars(val) {
      this.$emit("input", val)
    }
  },
}
</script>

<style scoped lang='scss'>
.stars {

  .icon {
    color: #cccccc55;

    &.large {
      font-size: r(33px);
      margin-right: r(10px);
    }

    &.active {
      color: #FCCF0A;
    }
  }
}
</style>